<template>
  <div>
    <div style="margin-left:5%">

     <!-- 年级选择-->
    <el-select v-model="cgrade" placeholder="请选择年级" style="width:150px">
      <el-option
        v-for="item in options01"
        :key="item.cgrade"
        :label="item.label"
        :value="item.cgrade"
      >
      </el-option>
    </el-select>

     <!-- 班级选择-->
    <el-select v-model="cclsname" placeholder="请选择班级" style="width:150px">
      <el-option
        v-for="item in optionss01"
        :key="item.cclsname"
        :label="item.label"
        :value="item.cclsname"
      >
      </el-option>
    </el-select>

    <!-- 创建时间 -->
    <el-date-picker
      v-model="createTime"
      type="date"
      placeholder="选择开班日期"
      style="width:180px">
    </el-date-picker>
    <!-- 分班时间 -->
    <el-date-picker
      v-model="div_class"
      type="date"
      placeholder="选择分科日期"
      style="width:180px">
    </el-date-picker>

    <el-button
      icon="el-icon-edit"
      size="model"
      type="primary"
      @click="createClass"
    >
      创建班级
    </el-button>

    </div>
    <div style="margin-left:5%;margin-top:1%">
    <!-- 年级选择-->
    <el-select v-model="grade" placeholder="请选择年级">
      <el-option
        v-for="item in options"
        :key="item.grade"
        :label="item.label"
        :value="item.grade"
      >
      </el-option>
    </el-select>

     <!-- 班级选择-->
    <el-select v-model="clsname" placeholder="请选择班级">
      <el-option
        v-for="item in optionss"
        :key="item.clsname"
        :label="item.label"
        :value="item.clsname"
      >
      </el-option>
    </el-select>
    
    <!-- 请输入教师姓名 -->
    <el-input
      @keyup.enter.native="selectinfoByIf"
      style="width: 240px; height: 100px"
      placeholder="教师姓名"
      v-model="name"
    >
    </el-input>
    <el-button
      icon="el-icon-search"
      size="model"
      type="primary"
      @click="selectByIf"
    >
      搜索
    </el-button>
  </div>  

    <el-table :data="tableData" style="width: 100%;margin-top:-1%">
      <el-table-column label="班级名称" width="180" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="科目" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.subject }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="代课老师" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.name != null">
            <el-tag size="medium">
              {{ scope.row.name}}
            </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium">
              暂未分配
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="班主任" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.headTeacher != null && scope.row.headTeacher.length>=1">
            <el-tag size="medium">
              {{ scope.row.headTeacher }}
            </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium">
              暂未分配
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="开班时间" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ 
               new Date(scope.row.createTime).toLocaleString()
              }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分班时间" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ 
               new Date(scope.row.div_class).toLocaleString()
              }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="文理分科" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.status == 0">
            <el-tag size="medium">
              暂未分班
            </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-if="scope.row.status == 1">
            <el-tag size="medium">
              文科
            </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-if="scope.row.status == 2">
            <el-tag size="medium">
              理科
              </el-tag>
          </div>
        </template>
      </el-table-column>
     </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      align="center"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      currentPage: 1, //当前页
      page:1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],

//选择年级
      options01:[      
        {
          cgrade: "高一",
          label: "高一",
        },
        {
          cgrade: "高二",
          label: "高二",
        },
        {
          cgrade: "高三",
          label: "高三"
        }, 
      ],
      cgrade:"",
      //选择班级
      optionss01:[
        {
          cclsname: "1班",
          label: "1班",
        },
        {
          cclsname: "2班",
          label: "2班",
        },
        {
          cclsname: "3班",
          label: "3班"
        }, 
         {
          cclsname: "4班",
          label: "4班",
        },
        {
          cclsname: "5班",
          label: "5班",
        },
        {
          cclsname: "6班",
          label: "6班"
        }, 
        {
          cclsname: "7班",
          label: "7班"
        }, 
        {
          cclsname: "8班",
          label: "8班"
        }, 
        {
          cclsname: "9班",
          label: "9班"
        }, 
        {
          cclsname: "10班",
          label: "10班"
        },
      ],
      cclsname:"",

      //选择年级
      options:[
        {
          grade: "",
          label: "所有年级",
        },
        {
          grade: "高一",
          label: "高一",
        },
        {
          grade: "高二",
          label: "高二",
        },
        {
          grade: "高三",
          label: "高三"
        }, 
      ],
      grade:"",
      //选择班级
      optionss:[
        {
          clsname: "",
          label: "所有班级",
        },
        {
          clsname: "1班",
          label: "1班",
        },
        {
          clsname: "2班",
          label: "2班",
        },
        {
          clsname: "3班",
          label: "3班"
        }, 
         {
          clsname: "4班",
          label: "4班",
        },
        {
          clsname: "5班",
          label: "5班",
        },
        {
          clsname: "6班",
          label: "6班"
        }, 
        {
          clsname: "7班",
          label: "7班"
        }, 
        {
          clsname: "8班",
          label: "8班"
        }, 
        {
          clsname: "9班",
          label: "9班"
        }, 
        {
          clsname: "10班",
          label: "10班"
        },

      ],
      clsname:"",
      name:"",
     
      //建班时间
      createTime:"",
      //分班时间
      div_class:"",
    };
    
  },
  methods: {
    //条件查询
    selectByIf(){

      axios
         .get(commons.baseUrl+"gradedean/teacherIf",
              {params:{page:this.page,size:this.size,
               cname:this.grade+this.clsname,name:this.name}})
         .then(resp=>{

           console.log(resp)

          this.tableData = resp.data.datas;
          this.total = resp.data.total;
          this.totalPage = resp.data.totalPage;
          this.currentPage = resp.data.currentPage;
          this.page = resp.data.currentPage;
          this.size = resp.data.size;
           
         })

    },
    //班级创建查询
    createClass(){
       
        let cls = {
          cname:this.cgrade+this.cclsname,
          createTime:this.createTime,
          div_class:this.div_class,
        }
       axios
         .post(commons.baseUrl+"gradedean/createClass",
         cls,{headers: { "Content-Type": "application/JSON" }}
          )
         .then(resp=>{
             console.log(resp)
             this.$message(resp.data.message);
       })

    },

    //分页
    findByPage() {
      axios
        .get(
          commons.baseUrl +
            "gradedean/classInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.page = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/classInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.page = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/classInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.page = res.data.currentPage;
          this.size = res.data.size;
        });
    },
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {},
};
</script>
<style scoped></style>
